<script setup>
import { ref, onMounted } from 'vue'

import { useUserStore } from '@/stores/userStore.js'
import { findLikeListAPI } from '@/apis/user.js'
import GoodsItem from '@/views/Home/components/GoodsItem.vue'
import SwiperGroup from '@/components/SwiperGroup/index.vue'

const userStore = useUserStore()
const collectList = ref([])
const likeList = ref([])
const swiperId = ref('swiper1')

const getLikeList = async () => {
  const resc = await findLikeListAPI({limit: 4})
  collectList.value = resc.result
  const res = await findLikeListAPI({limit: 6})
  likeList.value = res.result
}
onMounted(() => getLikeList())
</script>

<template>
  <!--用户信息模块-->
  <div class="home-overview">
    <!-- 用户信息 -->
    <div class="user-meta">
      <div class="avatar">
        <img :src="userStore.userInfo?.avatar" alt="" />
      </div>
      <h4>{{ userStore.userInfo?.account }}</h4>
    </div>
    <div class="item">
      <a href="javascript:">
        <span class="iconfont icon-hy"></span>
        <p>会员中心</p>
      </a>
      <a href="javascript:">
        <span class="iconfont icon-aq"></span>
        <p>安全设置</p>
      </a>
      <a href="javascript:">
        <span class="iconfont icon-dw"></span>
        <p>地址管理</p>
      </a>
    </div>
  </div>
  <!--我的收藏模块-->
  <div class="home-panel">
    <div class="head">
      <h3>我的收藏</h3>
      <small></small>
    </div>
    <div class="goods-list">
      <ul>
        <li v-for="goods in collectList" :key="goods.id">
          <GoodsItem :goods="goods" />
        </li>
      </ul>
    </div>
  </div>
  <!--我的足迹模块-->
  <div class="home-panel">
    <div class="head">
      <h3>我的足迹</h3>
      <small></small>
    </div>
    <div class="goods-list">
      <ul>
        <li v-for="goods in collectList" :key="goods.id">
          <GoodsItem :goods="goods" />
        </li>
      </ul>
    </div>
  </div>
  <!--猜你喜欢模块-->
  <div class="home-panel like-panel">
    <div class="head">
      <h3>猜你喜欢</h3>
    </div>
    <div class="goods-list">
      
      <SwiperGroup :goods-list="likeList"></SwiperGroup>
      
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-overview{
  height: 132px;
  background: url(@/assets/images/center-bg.png) no-repeat center / cover;
  display: flex;
  .user-meta{
    flex: 1;
    display: flex;
    align-items: center;
    .avatar{
      width: 85px;
      height: 85px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 60px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    h4{
      padding-left: 26px;
      font-size: 18px;
      font-weight: normal;
      color: white;
    }
  }
  .item{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    &:first-child{
      border-right: 1px solid #f4f4f4;
    }
    a{
      color: white;
      font-size: 16px;
      text-align: center;
      .iconfont{
        font-size: 32px;
      }
      p{
        line-height: 32px;
      }
    }
  }
}
.home-panel{
  background-color: #fff;
  padding: 0 20px;
  margin-top: 20px;
  .head{
    height: 66px;
    border-bottom: 1px solid #f5f5f5;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    h3{
      font-size: 22px;
      font-weight: 400;
      color: #333;
    }
    small{
      margin-bottom: 2px;
    }
  }
  .goods-list{
    margin-top: 20px;
    padding-bottom: 20px;
    ul{
      display: flex;
      margin-left: -10px;
      margin-right: -10px;
      li{
        width: 25%;
        padding: 0 10px;
        :deep() {
          .extra{
            display: none;
          }
        }
      }
    }
  }
}
.like-panel{
  .goods-list{
    overflow: hidden;
  }
}
</style>